<script setup>

import {ref} from 'vue';
import {appointment} from '@/common/apis/study';
import {courseCount} from '@/common/apis/course';
import selectReadMode from './components/select-read-mode.vue';
import selectWordMode from './components/select-word-mode.vue';
import {imageBaseUrl2} from "@/common/config";

/** props */
const props = defineProps(['appointmentId', 'learnId', 'learnType']);
props.learnType == 1 && uni.removeStorageSync('_course-date');

/** 课程详情 */
const courseInfo = ref({});

/** 课程数量 */
const courseTotal = ref({});

/** 获取课程详情 */
const getCourseInfo = async () => {
  if (!props.appointmentId) return;
  const result = await appointment({id: props.appointmentId});
  courseInfo.value = result;
  uni.setStorageSync('_course-date', {finishTime: result.finishTime, learnType: props.learnType});
};

/** 获取课程数量 */
const getCourseTotal = async () => {
  const result = await courseCount();
  courseTotal.value = result;
};

/** 获取数据 */
getCourseInfo();
// getCourseTotal();


/** 选择阅读模式弹窗状态 */
const selectReadModeStutas = ref(false);

/** 选择单词标记模式弹窗状态 */
const selectWordModeStutas = ref(false);

/** to module */
const toModule = index => {
  // switch(index) {
  // 	case 1: {
  // 		// if (!props.learnId && !courseTotal.value.vocabularyCourse) {
  // 		if (!props.learnId) {
  // 			uni.showToast({ icon: 'none', title: '您没有开通单词相关课程~' });
  // 			break;
  // 		};

  // 		if (courseInfo.value.courseCategory?.id === 4) {
  // 			uni.showToast({ icon: 'none', title: '当前预约课程非单词识记课程哦~' });
  // 			break;
  // 		};

  // 		const query = { learnType: props.learnType };
  // 		if (props.learnId) query.learnId = props.learnId;
  // 		else if (props.appointmentId) query.appointmentId = props.appointmentId;
  // 		uni.$fui.href(`/pages/course/word/index`, query);
  // 		break;
  // 	}

  // 	case 5: {
  // 		const query = { learnType: props.learnType };
  // 		if (props.learnId) query.learnId = props.learnId;
  // 		uni.$fui.href(`/pages/study/indextest`, query);
  // 		break;
  // 	}

  // 	case 3: {
  // 		// if (!props.learnId && !courseTotal.value.articleCourse) {
  // 		if (!props.learnId) {
  // 			uni.showToast({ icon: 'none', title: '您没有开通阅读相关课程~' });
  // 			break;
  // 		};

  // 		if (courseInfo.value?.courseCategory && courseInfo.value?.courseCategory?.id !== 4) {
  // 			uni.showToast({ icon: 'none', title: '当前预约课程非阅读课程~' });
  // 			break;
  // 		};

  // 		const query = { learnType: props.learnType };
  // 		if (props.appointmentId) query.appointmentId = props.appointmentId;
  // 		uni.$fui.href(`/pages/course/reading/index`, query);
  // 		break;
  // 	}

  // 	// case 2: {

  // 	// 	break;
  // 	// }

  // 	default: {
  // 		uni.showToast({ title: '语法训练、听力训练正在更新中，敬请期待', icon: 'none' });
  // 		break;
  // 	}
  // };
  console.log(index)
  switch (index) {
    case 1: {
      uni.$fui.href(`/pages/study/indextest`, {learnType: props.learnType});
      break;
      // selectWordModeStutas.value = true;
    }

    case 5: {
      uni.$fui.href(`/pages/study/indextest`, {learnType: props.learnType});
      break;
    }

    case 2: {
      selectWordModeStutas.value = true;
      // uni.$fui.href(`/pages/course/word/index`, {learnType: props.learnType, categoryId: 9});
      break;
    }

    case 3: {
      selectReadModeStutas.value = true;
      break;
    }

    case 4: {
      uni.$fui.href('/pages/course/word-string/index', {isTrial: 1, categoryId: 8});
      break;
    }
  }
};


/** 选择阅读模式 */
const chooseReadMode = type => {
  type === 2 && uni.$fui.href(`/pages/course/aireading/index`);

  if (type === 1) {
    if (courseInfo.value?.courseCategory && courseInfo.value?.courseCategory?.id !== 4) {
      uni.$fui.toast('当前预约课程非阅读课程~');
      return;
    }


    const query = {learnType: props.learnType};
    uni.$fui.href(`/pages/course/reading/index`, query);
  }


  selectReadModeStutas.value = false;
};


/** 选择识记模式 */
const chooseWordMode = type => {
  switch (type) {
    case 1: {
      uni.$fui.href(`/pages/course/word/index`, {learnType: props.learnType});
      break;
    }

    case 2: {
      uni.$fui.href('/pages/course/spell/index');
      break;
    }

    case 3: {
      uni.$fui.href(`/pages/course/spoken/select`);
      break;
    }
  }


  selectWordModeStutas.value = false;
};


</script>

<template>
  <view class="box_cont flex_center_center containerbox">
    <uv-navbar auto-back bg-color="#fff" left-icon-color="#000" placeholder title="课程选择"
               titleStyle="color:#000"/>

    <view style=" background: #06592B;" class="containerbox items-center justify-center ">
      <view class="type_box">
        <img style=" width: 180rpx; height: 206rpx; position: absolute;" :src="`${imageBaseUrl2}logo12.png`" alt=""/>
        <view class="typecontainer">
          <image
              v-for="item in 3"
              :key="item"
              :class="`course-${item}`"
              :src="`${imageBaseUrl2}/course${item}.png`"
              mode="widthFix"
              @click="toModule(item)"
          />

          <view class="course-5 course-5-z-index" @tap="toModule(5)"/>
        </view>
      </view>

      <view class="pt-100 text-32 text-center text-white mt-30">为您设计有针对性的课程</view>
      <view class="pb-40 text-26 text-center text-white">迅速提高英语水平</view>
    </view>


    <select-read-mode v-model="selectReadModeStutas" @choose-mode="chooseReadMode"/>
    <select-word-mode v-model="selectWordModeStutas" @choose-mode="chooseWordMode"/>
  </view>
</template>


<style>
page {
  background-color: #4d6d8a
}
</style>

<style lang="scss" scoped>
.absolute {
  position: absolute
}

.type_box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  transform: scale(1.3);
  width: 500rpx;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500rpx;
  background-image: url('https://online-edu-test.mfy777.com/img/yuan.png');
}

.typecontainer {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-54rpx)
}

.course-1 {
  width: 386rpx;
  position: absolute;
  top: 16rpx;
  left:252rpx;
  transform: translate(-150rpx, 0);
  z-index: 5;
}

.course-2 {
  width: 243rpx;
  position: absolute;
  left:175rpx;
  top:115rpx;
  transform: translate(120rpx, 14rpx);
  z-index: 4;
}

.course-3 {
  width: 246rpx;
  position: absolute;
  left: 10rpx;
  top: -93rpx;
  transform: translate(60rpx, 246rpx);
  z-index: 3;
}

.course-4 {
  width: 271rpx;
  position: absolute;
  left: 50%;
  transform: translate(-130rpx, 294rpx);
  z-index: 2
}

.course-5 {
  width: 190rpx;
  position: absolute;
  left: 50%;
  transform: translate(-198rpx, 110rpx);
  z-index: 1
}

.course-5-z-index {
  height: 80px;
  transform: translate(-198rpx, 110rpx);
  border-top-right-radius: 100rpx;
  z-index: 6}
</style>